<%--
  Created by IntelliJ IDEA.
  User: w7851
  Date: 2018/5/16
  Time: 7:49
  登陆页面
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎登录 </title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>

    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>

    <script src="/js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="/css/ydui.css">
    <script src="/js/ydui.flexible.js"></script>

    <style type="text/css">
        #content {
            max-width: 750px;
        }

        #errortip {
            color: red;
            margin-left: 16px;
            display: none;
        }
    </style>
</head>
<body>
<div id="content">



    <div class="g-scrollview">

        <p style="text-align: center;font-size: 0.7rem;margin: 16px;margin-top: 32px">欢迎登录</p>

        <form action="/mobile" method="post">
            <input name="method" value="login" style="display: none">

            <div class="m-cell">
                <div class="cell-item">
                    <div class="cell-left">手机：</div>
                    <div class="cell-right"><input id="phone" name="phone" type="text"
                                                   class="cell-input" placeholder="请输入手机号码" autocomplete="off"/></div>
                </div>

                <div class="cell-item">
                    <div class="cell-left">密码：</div>
                    <div class="cell-right"><input type="password" id="passwd" class="cell-input" placeholder="请输入密码"
                                                   name="passwd"
                                                   autocomplete="off"/></div>
                </div>


                <div class="cell-item">
                    <div class="cell-right">
                        <input type="text" name="code" id="code" class="cell-input" placeholder="&nbsp;&nbsp;请输入验证码"
                               autocomplete="off">
                        <img src="/mobile?method=getyzm" style="width: 150px;height: 40px;margin-top: 8px"
                             onclick="changeImg()">
                    </div>
                </div>

            </div>

            <div class="errors">
                <p id="errortip">金额有误</p>
            </div>

            <%--<a href="https://www.baidu.com/"><p style="text-align: right;padding: 0px 24px;margin-top: 32px;color: #72ACE3;font-size: 0.3rem">登录遇到问题</p></a>--%>
            <div style="padding: 0 16px;margin-top: 8px">
                <input type="submit" style="margin-top: 0px" class="btn-block btn-primary" value="确认登录">
            </div>

            <%--<div style="margin: 16px">--%>
                <%--<a href="/mobile/regnew.jsp" style="margin: auto;padding: 0"class="btn-block btn-warning">注册新用户</a>--%>
            <%--</div>--%>
        </form>

    </div>


    <%--<a type="submit" href="/mobile?method=gomobilepage&page=regnew" class="btn btn-info"--%>
    <%--style="display: block;width: 100%;height:44px;margin-top: 8px;line-height: 30px">注册新用户</a>--%>
</div>
</body>
<script type="text/javascript">

    function changeImg() {
        var imgSrc = $("img");
        var src = "/mobile?method=getyzm&t=" + (new Date().getTime());
        console.log(src);
        imgSrc.attr("src", src);
    }

    $("form").submit(function () {
        var phone = $("#phone");
        var passwd = $("#passwd");
        var code = $("#code");
        var tip = $("#errortip");
        var result = false;

        if (code.val() == "") {
            tip.show().html("请输入验证码");
            return false;
        }

        $.ajax(
            {
                type: "POST",
                async: false,
                url: "/mobile",
                data: {"method": "verifylogin", "phone": phone.val(), "passwd": passwd.val(), "code": code.val()},
                success: function (data) {
                    console.log(data);
                    var correct = "ok";
                    if (data == correct) {
                        result = true;
                    } else {
                        tip.show().html(data);
                        result = false;
                    }
                }
            }
        );

        if (!result){
            return false;
        }
    });

</script>
</html>
